<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>点线面绘制</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 510px;
            border:1px solid #3473b7;
        }
        #toolbar {
        position: relative;
        padding-top: 5px;
        padding-bottom: 10px;
    }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src = "../libs/SuperMap.Include.js"></script>
    <script type="text/javascript">
        var map,layer,drawPoint, drawLine,drawPolygon,pointLayer,lineLayer,polygonLayer,plotingtLayer;
        var host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        var mapurl = host + "/iserver/services/map-world/rest/maps/World";
        var plotUrl = host + "/iserver/services/plot-jingyong/rest/plot/";

        function init()
        {
            map = new SuperMap.Map("map",{controls:[
                new SuperMap.Control.Zoom() ,
                new SuperMap.Control.Navigation() ,
                new SuperMap.Control.LayerSwitcher()
            ]});

            layer= new SuperMap.Layer.TiledDynamicRESTLayer("World", mapurl, null,{maxResolution:"auto"});
            layer.events.on({"layerInitialized":addLayer});

            plottingLayer = new SuperMap.Layer.PlottingLayer("标绘图层", plotUrl);
            plottingLayer.style = {
                fillColor: "#66cccc",
                fillOpacity: 0.4,
                strokeColor: "#66cccc",
                strokeOpacity: 1,
                strokeWidth: 3,
                pointRadius:6
            };

        }
        function addLayer(){

            map.addLayers([layer,plottingLayer]);
            //显示地图范围
            map.setCenter(new SuperMap.LonLat(0, 0), 0);
        }

        function draw_line(){
            clearFeatures();
            var locationPointWCs = [];
            locationPointWCs.push(new SuperMap.Geometry.Point(0, 0));
            locationPointWCs.push(new SuperMap.Geometry.Point(0, 20));
            locationPointWCs.push(new SuperMap.Geometry.Point(20, 10));
            locationPointWCs.push(new SuperMap.Geometry.Point(10, 30));

            plottingLayer.createSymbolWC(0,SuperMap.Plot.SymbolType.POLYLINESYMBOL,locationPointWCs);
        }

        function draw_polygon(){
            clearFeatures();
            var locationPointWCs = [];
            locationPointWCs.push(new SuperMap.Geometry.Point(20, 0));
            locationPointWCs.push(new SuperMap.Geometry.Point(10, 20));
            locationPointWCs.push(new SuperMap.Geometry.Point(30, 40));
            locationPointWCs.push(new SuperMap.Geometry.Point(60, 10));

            plottingLayer.createSymbolWC(0,SuperMap.Plot.SymbolType.ARBITRARYPOLYGONSYMBOL,locationPointWCs);
        }

        function draw_text(){
            clearFeatures();

            plottingLayer.createTextWC("Text", new SuperMap.Geometry.Point(20, 0), {});
        }

        function clearFeatures(){
            plottingLayer.removeAllFeatures();
        }

        document.oncontextmenu = function(evt){
            return false;
        }
    </script>
</head>
<body onload="init()" >
<div id="toolbar">
    <input type="button" class="btn" value="绘线" onclick="draw_line()" />
    <input type="button" class="btn" value="绘面" onclick="draw_polygon()" />
    <input type="button" class="btn" value="绘文字" onclick="draw_text()" />
    <input type="button" class="btn" value="清除" onclick="clearFeatures()" />
</div>
<div id="map"></div>

</body>
</html>